
<%@ page import="com.asisto.model.Persona" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="layout" content="main" />
        <title>Edit Persona</title>

        <g:javascript>
              jQuery(function(){
                  jQuery('#tabs').tabs();
              });
        </g:javascript>

        <script type="text/javascript">

          var borrar = '&nbsp;<span class="borrado" onclick="borrar(this);">X</span>';
          var camposPadre = '<div class="padre">Nombre: <input id="nombre" type="text" size="20" name="nombre"/> Apellidos: ' +
'<input id="apellidos" type="text" size="20" name="apellidos"/>' + borrar + '</div>';

          function anhadePadre(elem) {

              //Primero miramos cuandos padres tenemos añadidos
              var numeroPadres = jQuery('#padres').find('.padre').size();

              //Se crea una nueva fila para datos del padre
              jQuery('#lista-padres').hide();
              jQuery('#lista-padres').append(camposPadre);
              jQuery('#lista-padres').fadeIn(1000);
              
              
              //Se cambia el nombre del attr name para añadir el número de padre
              var nameCampoNombre = 'nombre_' + numeroPadres;
              var nameCampoApellidos = 'apellidos_' + numeroPadres;
              jQuery('.padre:last #nombre').attr('name',nameCampoNombre);
              jQuery('.padre:last #apellidos').attr('name',nameCampoApellidos);

              //Se muestra el div de padres
              jQuery('#padres').fadeIn(1000);
              
          }

        </script>

    </head>
    <body>
      
        <div class="body">
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <g:hasErrors bean="${personaInstance}">
            <div class="errors">
                <g:renderErrors bean="${personaInstance}" as="list" />
            </div>
            </g:hasErrors>
            <g:form method="post" >
                <input type="hidden" name="id" value="${personaInstance?.id}" />
                <input type="hidden" name="version" value="${personaInstance?.version}" />


                <h1>Modificar persona</h1>

                <div id="tabs">

                    <ul>
                      <li><a href="#tab1">Datos</a></li>
                      <li><a href="#tab2">Familia</a></li>
                    </ul>

                    <div class="dialog" id="tab1">
                      <div class="formulario">

                        <dl>

                          <dt>Nombre:</dt>
                          <dd>
                            <div class="value ${hasErrors(bean:personaInstance,field:'nombre','errors')}">
                                <input type="text" maxlength="100" size="50" id="nombre" name="nombre"
                                       value="${fieldValue(bean:personaInstance,field:'nombre')}"/>
                            </div>
                          </dd>

                          <dt>Apellidos:</dt>
                          <dd>
                            <div class="value ${hasErrors(bean:personaInstance,field:'apellidos','errors')}">
                                <input type="text" maxlength="100" size="50" id="apellidos" name="apellidos"
                                       value="${fieldValue(bean:personaInstance,field:'apellidos')}"/>
                            </div>
                          </dd>
                        </dl>

                      </div>

                      <div class="botones">
                          <g:actionSubmit name="modificar" action="update" value="Modificar"/>
                      </div>

                    </div>

                    <div class="dialog" id="tab2">

                        <div class="list">
                            <table>
                                <thead>
                                    <tr>
                                        <g:sortableColumn property="id" title="Id" />
                                        <g:sortableColumn property="nombre" title="Nombre" />
                                        <g:sortableColumn property="apellidos" title="Apellidos" />
                                    </tr>
                                </thead>
                                <tbody>
                                <g:each in="${listaPadres}" status="i" var="personaInstance">
                                    <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">

                                        <td><g:link action="show" id="${personaInstance.id}">${fieldValue(bean:personaInstance, field:'id')}</g:link></td>

                                        <td>${fieldValue(bean:personaInstance, field:'nombre')}</td>

                                        <td>${fieldValue(bean:personaInstance, field:'apellidos')}</td>

                                    </tr>
                                </g:each>
                                </tbody>
                            </table>
                        </div> <!-- fin lista -->

                        <div style="margin-top:5px;"><span class="enlace-nuevo" onclick="anhadePadre(this);">Añadir padre</span></div>
                        <g:form>
                          <input type="hidden" name="idHijo" value="${personaInstance.id}"/>
                        <div id="padres" style="display:none;">
                          <div id="lista-padres"></div>
                          <g:actionSubmit name="nuevoPadre" action="nuevoPadre" value="Guardar"/>
                        </div>
                        </g:form>

                    </div>


                </div>


            </g:form>
        </div>
    </body>
</html>
